<template>
  <div class="wrapper">
    <BaseHeader></BaseHeader>
    <Search></Search>
    <div class="banner-index">
      <div class="banner-wrap">
        <!-- 轮播图 
      	<swiper class="banner-swiper" :current="bannerIndex" :autoplay="autoplay" indicator-dots circular horizontal @change="bannerChange">
      		<swiper-item class="swiper-item" v-for="(item, index) in banners" :key="index">
      			<navigator v-if="item.linkMode == 0" :url="`/pages/goods/index?id=${item.goodsId}`">
      				<image class="cover" :src="item.pictureUrl"></image>
      			</navigator>
      			<a v-else :href="item.linkUrl" target="_blank">
      				<image class="cover" :src="item.pictureUrl"></image>
      			</a>
      		</swiper-item>
      	</swiper>-->
      	<!-- 左右切换箭头 
      	<view class="btn btn-left" @click="switchBanner(false)">
      		<i class="icon i-left"></i>
      	</view>
      	<view class="btn btn-right" @click="switchBanner(true)">
      		<i class="icon i-right"></i>
      	</view>-->
      </div>
      
      <!-- 左边分类 -->
      <!--img onerror="nofind()" :src="`static/image/home/ATL0${index+1}.png`" style="width:20px;height:27px"-->
      <!-- 一级导航汇总 -->
      <!-- 一级推荐导航汇总 -->
      <div class="nav_left">
        <!--div class="nav_left1" v-for="(item, index) in categories" :key="index">
          <div class="left">
            <i class="iconfont" :class="categoriesType[index]" style="color:#ff6700;font-size:24px;font-weight:500;"></i>
          </div>
          <div class="right">
            <div class="n1">
              <a :href="`/pages/mall/search/index?id=${first}`" target="_blank" v-for="(first, i) in item.name.split(' ')" :key="i">{{first}}</a>
            </div>
            <div class="n2" v-if="item.nameSub">
              <a :href="`/pages/mall/search/index?id=${first}`" target="_blank" v-for="(first, i) in item.nameSub.split(' ')" :key="i">{{first}}</a>
            </div>
          </div>
          <div class="right_r">
            <div class="cover_line"></div>
          </div>
        </div-->

        <div class="sidenav_destination new_sidenav_destination">
          <ul class="destination_list">
            <li data-index="0" class>
              <h3 class="destination_col">泰国(
                <a href="/goodsList?keysearch=曼谷" target="_blank">曼谷</a>|
                <a href="/goodsList?keysearch=普吉" target="_blank">普吉</a>
                )
              </h3>
            </li>
            <li data-index="1" class>
              <h3 class="destination_col">
                <a href="/goodsList?keysearch=新加坡" target="_blank">新加坡</a>|
                <a href="/goodsList?keysearch=马来西亚" target="_blank">马来西亚</a>
              </h3>
            </li>
            <li data-index="2" class>
              <h3 class="destination_col">
                <a href="/goodsList?keysearch=文莱" target="_blank">文莱</a>|
                <a href="/goodsList?keysearch=印尼" target="_blank">印尼</a>|
                <a href="/goodsList?keysearch=菲律宾" target="_blank">菲律宾</a>
              </h3>
            </li>
            <li data-index="3" class>
              <h3>越南|老挝|缅甸|柬埔寨</h3>
            </li>
            <li data-index="0" class>
              <h3>日本|韩国|中东|欧美澳</h3>
            </li>
            <li data-index="0" class>
              <h3>北京|华东|福建|江西</h3>
            </li>
            <li data-index="0" class>
              <h3>海南|云贵|川藏|湖南|湖北</h3>
            </li>
            <li data-index="0" class>
              <h3>山东|东北|呼伦贝尔</h3>
            </li>
            <li data-index="0" class>
              <h3>山西|内蒙|河南|河北</h3>
            </li>
            <li data-index="0" class>
              <h3>陕西|甘肃|青海|宁夏|新疆</h3>
            </li>
          </ul>
        </div>
      </div>

      <div class="nav_right"> 
        <div>
          <span>11111212111111</span>
          <span>11111212111111</span>
          <span>11111212111111</span>
          <span>11111212111111</span>
          <span>11111212111111</span>
        </div>
        <div></div>
        <div></div>
      </div>

    </div>

  </div>
</template>

<script>
  import storage from "@/plugins/storage";
  import Search from "@/components/Search";
  import { findBanners, findCategories } from "@/api/index.js";
  export default {
    components: {
      Search
    },
    data() {
      return {
        banners: [],
        bannerIndex: 0,
        categoriesType: [
          'icon-travel-tourism_mount', 
          'icon-jingdian2', 
          'icon-dibudaohanglan-', 
          'icon-ziranfengguang', 
          'icon-feiji', 
          'icon-zhangjiajie',
          'icon-jingqu', 
        ],
        categories: [],
        categoryIndex: -1,
        autoplay: true,
      }
    },
    computed: {
      goodsPanelWidth() {
        if (this.categoryIndex > -1) {
          const goodsCount = [] //this.categories[this.categoryIndex].goodsList.length
          if (goodsCount > 0) {
            let columns = Math.floor(goodsCount / 6)
            if (goodsCount % 6 > 0) columns++
            if (columns > 4) columns = 4
            return columns * 248
          }
        }
      }
    },
    created() {
      this.handleFindBanners()
      this.handleFindCategories()
    },
    methods: {
      handleFindBanners() {
      	// uni.showLoading({
      	// 	title: '加载中...',
      	// 	mask: true
      	// })
        findBanners().then(res => {
          //uni.hideLoading()
          this.banners = res.result
          console.info('findBanners@@', this.banners)
        }).catch(e => {
          console.log('/banner/slides 请求错误', e)
        })
      },
      handleFindCategories() {
        findCategories().then(res => {
          this.categories = res.result
        }).catch(e => {
          console.log('/category/heroCategories 请求错误', e)
        })
      },
      bannerChange(e) {
        this.bannerIndex = e.detail.current
      },
      switchBanner(toNext) {
        this.autoplay = false
        // if (toNext) {
        //   if (this.bannerIndex < this.banners.length - 1) {
        //     this.bannerIndex++
        //   } else {
        //     this.bannerIndex = 0
        //   }
        // } else {
        //   if (this.bannerIndex === 0) {
        //     this.bannerIndex = this.banners.length - 1
        //   } else {
        //     this.bannerIndex--
        //   }
        // }
        setTimeout(() => {
          this.autoplay = true
        }, 2000)
      },
      
      /**
       * @param anc线路列表条目
       */
      showSearch: function(name) {
        //原地址
        //var url = anc.url;
        //('cruiseController.do?load=detail&id=' + article.id)
      
        var query = {}
        query.name = name

        console.info('showSearch@@@@@' + name)

        //this.$router.push({ name: 'cruise', query: query})
        let url = '/pages/mall/search/index?name='
        //this.$navTo.togo(url, query)
        window.location.href = url + encodeURIComponent(name)
      },
    }
  }
</script>

<style lang="scss">
  @import '~@/assets/font/iconfont0/iconfont.css';
  @import '~@/assets/font/symbol/iconfont.css';
  @import '~@/components/cruise/css/detail.css';
  @import '~@/components/cruise/css/core.css';
  .banner-index {
    width: $page-width;
    margin: 0 auto;
    position: relative;

    /**轮播图*/
    .banner-wrap {
      position: relative;
      margin-left: 235px;
      
      :deep(.uni-swiper-wrapper .uni-swiper-dots) {
        right: 20px;
        left: auto;
        top: 92%;
        display: flex;
        transform: translateY(0);
        
        .uni-swiper-dot {
          width: 8px;
          height: 8px;
          margin: 0 5px;
          border: 2px solid;
          border-color: hsla(0, 0%, 100%, .3);
          border-radius: 10px;
          background: rgba(0, 0, 0, .4);

          &.uni-swiper-dot-active {
            background: hsla(0, 0%, 100%, .4);
            border-color: rgba(0, 0, 0, .4);
          }
        }
      }

      &,
      .banner-swiper,
      .cover {
        width: 970px;
        height: 450px;
      }

      .btn {
        position: absolute;
        top: 50%;
        width: 41px;
        height: 69px;
        transform: translateY(-50%);
        cursor: pointer;
        border-radius: 2px;
        @extend %flex-align-center;
        justify-content: center;

        &:hover {
          background-color: rgba(0, 0, 0, .6);
        }

        .icon {
          font-size: 30px;
          color: $border-color;
        }

        &.btn-left {
          left: 0px;
        }

        &.btn-right {
          right: 0;
        }
      }
    }

    .nav_left {
      position: absolute;
      width: 250px;
      left: 50%;
      top: 0;
      margin-left: -613px;
      height: 450px;
      background: #fff;
      box-shadow: 2px 7px 10px rgba(0, 0, 0, .08);
      -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .08);
      
      .nav_left1 {
        height: 65px;
        border-top: 1px dotted #d9d9d9;
        border-left: 4px solid #fff;
        padding: 13px;
        padding-left: 9px
      }
      
      .nav_left1:first-child {
        border-top: 0
      }
      
      .nav_left1 .left {
        float: left;
        width: 32px;
        margin-top: 5px
      }
      
      .nav_left1 .right {
        width: 175px;
        float: left
      }
      
      .nav_left1 .right .n1 a {
        font-size: 15px;
        color: $color-main-1;
        padding-right: 6px;
      }
      
      .nav_left1 .right .n2 {
        margin-top: 5px;
        overflow: hidden;
        height: 16px；
      }
      
      .nav_left1 .right .n1 {
        white-space: nowrap;
        overflow: hidden
      }
      
      .nav_left1 .right .n2 a {
        color: #333;
        font-size: 12px;
        padding-right: 6px;
        float: left;
        line-height: 16px
      }
      
      .nav_left1 .right .n2 a:hover {
        color: $color-main-1
      }
      
      .nav_left1 .right1 {
        float: left;
        margin-top: 11px
      }
      
      .nav_left1 .right1 i {
        color: #e3e3e3
      }
      
      .nav_left1 .nav_left1_hover {
        position: absolute;
        left: 250px;
        width: 472px;
        background: #fff;
        border-left: 1px dotted $color-main-2;
        top: 0;
        min-height: 410px;
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .2);
        box-shadow: 0 0 10px rgba(0, 0, 0, .2);
        padding: 20px;
        z-index: 2;
        display: none
      }
      
      .nav_left1 .nav_left1_hover .t1 {
        font-size: 14px;
        color: $color-main-1
      }
      
      .nav_left1 .nav_left1_hover .t1 i {
        color: $color-main-1;
        font-size: 13px
      }
      
      .nav_left1 .nav_left1_hover .t2 {
        font-size: 14px;
        margin-top: 16px
      }
      
      .nav_left1 .nav_left1_hover .t3 {
        font-size: 14px;
        margin-top: 5px;
        overflow: hidden
      }
      
      .nav_left1 .nav_left1_hover .t3 a {
        line-height: 22px;
        padding-right: 10px;
        float: left;
        font-size: 12px;
        color: #333
      }
      
      .nav_left1 .nav_left1_hover .t3 a.red,
      .nav_left1 .nav_left1_hover .t3 a:hover {
        color: $color-main-1
      }
      
      .nav_left1 .nav_left1_hover .t3 span {
        float: left;
        line-height: 22px;
        padding-right: 10px;
        color: #dedede;
        font-size: 10px;
        vertical-align: middle
      }
      
      .nav_left1 .nav_left1_hover .line {
        border-bottom: 1px dotted #d9d9d9;
        height: 0;
        margin: 10px 0
      }
      
      .nav_left1 .right_r {
        float: right;
        position: relative;
        display: none
      }
      
      .nav_left1 .cover_line {
        background: #fff;
        right: -14px;
        width: 10px;
        top: -13px;
        height: 63px;
        position: absolute;
        z-index: 2
      }
      
      .nav_left1:hover {
        border-top: 1px dotted $color-main-2;
        border-left: 4px solid $color-main-1
      }
      
      .nav_left1:hover .nav_left1_hover,
      .nav_left1:hover .right_r {
        display: block
      }
      
      .nav_left1:hover .right1 i {
        color: $color-main-1
      }
      
      .nav_left1:hover+.nav_left1 {
        border-top: 1px dotted $color-main-2
      }
      
      .nav_left1:first-child:hover {
        border-top: 0
      }
    }

  }

  h1, h2, h3, h4, h5 {
    font-family: 'microsoft yahei',Arial,sans-serif;
  }

  a {
    color: #000 !important;
    background: transparent;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    transition: color 0.2s ease;
  }

  a:hover {
    color: $color-primary !important;
    text-decoration:underline;
  }

  .new_sidenav_destination.sidenav_destination {
    background: #fff;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #f3f3f3;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
  }

  .new_sidenav_destination .destination_list li {
    padding-left: 26px;
    position: relative;
    height: 55px;
    overflow: hidden;
  }

  .new_sidenav_destination .destination_col::before {
    content: '';
    width: 6px;
    height: 6px;
    background-color: #2577e3;
    left: 16px;
    top: 19px;
    position: absolute;
  }


.sidenav_destination {
    float: left;
    position: relative;
    width: 350px;
    box-shadow: 3px 3px 3px rgb(0 0 0 / 20%);
    z-index: 20;
}

.sidenav_destination .destination_list {
    height: 579px;
    overflow: hidden;
    background-color: #fff;
}

.sidenav_destination .destination_list li {
    vertical-align: top;
    zoom: 1;
    padding: 9px 20px 10px;
    margin: 0;
    background: #fff;
}

.sidenav_destination .destination_list .destination_col {
    height: 45px;
    overflow: hidden;
    margin-bottom: -1px;
}

.sidenav_destination .destination_list h3 {
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 2px;
}

.sidenav_destination .destination_list p {
    overflow: hidden;
    zoom: 1;
    margin-left: -6px;
}

.index_right {
    float: right;
    width: 810px;
    padding-bottom: 10px;
    overflow: hidden;
    border: 1px red solid;
}

</style>